<template>
	<div class="x-table" v-loading="loading">
		<div class="x-table_tabs">
			<el-tabs v-if="dataResult.tabs&&dataResult.tabs.length!==0" v-model="activeName" @tab-click="tabHandleClick">
				<el-tab-pane name="-1">
					<span slot="label" class="tab-pane-span">
						<i class="flaticon-analytics"></i>全部</span>
					<div class="tab-pane-box">
					</div>
				</el-tab-pane>
				<el-tab-pane v-for="(item,index) in dataResult.tabs" :key="index" :name="String(item.key)">
					<span slot="label" class="tab-pane-span">
						<i :class="item.icon"></i>{{item.value}}</span>
					<div class="tab-pane-box">
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div class="administration_box">
			<div class="search_box">
				<search-form @searchForm="search" ref="searchForm" :tabsWdiget="tabsWdiget" :submit-loading="loading" />
			</div>
			<div class="table-action" v-if="dataResult.tableActions && !isDateSelect">
				<el-button-group>
					<el-button type="primary" v-for="(tableAction,tableIndex) in dataResult.tableActions.filter(r=>r.actionType===2)" :key="tableIndex" @click="tableActionMethod(tableAction)">{{tableAction.name}}</el-button>
				</el-button-group>
			</div>
			<slot name="form" :loading="loading" :search="searchHandler" />
		</div>
		<el-table @selection-change="handleSelectionChange" v-show="!isTemplate" class="table_box" empty-text="暂无数据" ref="table" :data="dataResult.result.result" :stripe="true" :fit="true" @row-click="rowClick" :highlight-current-row="true">
			<slot name="prepend" />
			<div v-for="(column, columnIndex) in dataResult.columns" :key="columnIndex">
				<el-table-column type="selection" v-if="column.style.type  === 'selection'" width="48">
				</el-table-column>
				<el-table-column v-else :class="column.style.align" border :column-key="column.columnKey" :label="column.label" :width="column.style.width" :prop="column.prop" :fixed="column.fixed" :render-header="column.headBackground" :sortable="column.sortable" :sort-by="column.sortBy" :sort-method="column.method"
					:show-overflow-tooltip="false" :align="column.style.algin" header-align="center" :class-name="column.className" :label-class-name="column.labelClassName" :selectable="column.selectable" :reserve-selection="column.reserveSelection" :filters="column.filters" :filter-placement="column.filterPlacement"
					:filter-multiple="column.filterMultiple" :filter-method="column.filterMethod" :filtered-value="column.filteredValue">
					<template slot-scope="scope">
						<span v-if="column.style.type  === 'icon'">
							<x-icon :src="scope.row[column.prop].name" :name="scope.row[column.prop]" :title="scope.row[column.prop]"></x-icon>
						</span>
						<column-link v-else-if="column.style.type  === 'link' && !isDateSelect" :class="column.style.align" :value='scope.row' :url='column.style.parameter' :title="scope.row[column.prop]">
						</column-link>
						<column-list v-else-if="column.style.type  === 'childlist'" :class="column.style.align" :value='scope.row[column.prop]' :type='column.style.parameter' :title="column.label">
						</column-list>
						<column-image v-else-if="column.style.type  === 'image'" :url="scope.row[column.prop]">
						</column-image>
						<x-label v-else-if="column.style.type  === 'label'" :color='column.style.parameter'>
							<span v-html="scope.row[column.prop]"></span>
						</x-label>
						<x-autoconfig v-else-if="column.style.type==='autoconfig'" v-model="scope.row[column.prop]" :type="column.style.parameter"></x-autoconfig>
						<x-code v-else-if="column.style.type  === 'code' || column.style.type.substr(0, 4) === 'code'">{{scope.row[column.prop]}}</x-code>
						<div v-else-if="column.style.type  === 'bool'">
							<x-label :color="scope.row[column.prop]?'success':'danger'">{{scope.row[column.prop]?'是':'否'}}</x-label>
						</div>
						<div v-else-if="column.style.type === 'grade'">
							<x-grade :id="scope.row[column.prop]" v-model="scope.row[column.prop]"></x-grade>
						</div>
						<div v-else-if="column.style.type  === 'foreignkey'">
							<div>{{getForeigKey(scope.row[column.prop], column)}}</div>
						</div>
						<x-enum v-else-if="column.style.type  === 'enum'" :type='column.style.parameter' :value='scope.row[column.prop]'></x-enum>
						<x-table-button v-else-if="column.style.type  === 'button'" @click="init" v-model="scope.row[column.prop]" :scope="scope.row"></x-table-button>
						<el-switch v-else-if="column.style.type  === 'switch'" v-model="scope.row[column.prop]" active-color="#13ce66" inactive-color="#ff4949" :disabled="true">
						</el-switch>
						<div v-else-if="column.style.type==='action' && !isDateSelect" fixed="right" class="btn-group" @mouseenter="enter(scope.row)" @mouseleave="leave(scope.row)">
							<el-popover placement="bottom" width="70" trigger="hover">
								<ul class="x-table_action">
									<li v-for="(action,actionIndex) in  dataResult.tableActions.filter(r=>r.actionType===1)" :key="actionIndex">
										<el-button :icon="action.icon.name" @click="tableActionMethod(action,scope.row,scope.$index)">{{action.name}}</el-button>
									</li>
								</ul>
								<a slot="reference" class="btn-circle btn-sm" href="javascript:;" data-toggle="dropdown">
									<i class="el-icon-setting"></i>操作
									<i class="el-icon-arrow-down el-icon--right"></i>
								</a>
							</el-popover>
						</div>
						<div v-else v-html="scope.row[column.prop]" :class="column.style.align">{{column.style.align}}</div>
					</template>
				</el-table-column>
			</div>

			<slot name="append" />
		</el-table>
		<slot :scope="dataResult"></slot>
		<el-dialog title="审核" :visible.sync="dialogVisible" :before-close="handleDialogClose">
			<zk-auto-form @formLoad="formLoad" :serviceConfig="dialogForm.columnActionView" ref="dialogAutoForm" @saveForm="saveForm"></zk-auto-form>
		</el-dialog>
		<div class="batch-setting" v-if="async&&dataResult.batchSetting&&dataResult.batchSetting.isBatch">
			<div style="margin-right: 20px;" class="batch-count" v-if="selectRows.length>0">已选<x-code>{{selectRows.length}}</x-code>项</div>
			<x-batch-setting style="margin-right: 10px;" v-show="$api.role(dataResult.type+'.BatchSetting')" :setting="dataResult.batchSetting" ref="batchSetting"></x-batch-setting>
			<el-button class="batch-but" size="small" v-show="$api.role(dataResult.type+'.BatchDelete')" plain @click="batchDelete" v-if="dataResult.batchSetting.deleteApi">批量删除</el-button>
		</div>
		<div style="margin-top: 10px;text-align: right;" v-if="isShowPage">
			<div class="block" style="height: 50px;">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="dataResult.result.pageIndex" :page-sizes="[10,15, 30, 60, 120]" :page-size="dataResult.result.pageSize" layout="total, sizes, prev, pager, next, jumper,->" :total="dataResult.result.recordCount">
				</el-pagination>
			</div>
		</div>
		<export-table ref="export_table"></export-table>
	</div>
</template>

<script>
	import action from './action'
	import props from './props'
	import searchForm from './search/'
	import columnLink from './columnItem/link'
	import columnImage from './columnItem/image'
	import columnList from './columnItem/childlist'
	import exportTable from './export/export-table'
	import format from './format.js'
	import data from './data.js'
	import selection from './selection.js'
	import dialog from './dialog.js'
	import ala from 'ala'
	export default {
		name: 'x-table',
		components: {
			searchForm,
			columnLink,
			columnImage,
			columnList,
			exportTable
		},
		props,
		data() {
			return {
				dialogVisible: false, // 是否显示审核弹窗
				dataResult: {
					tableActions: [],
					tabs: [],
					searchOptions: [],
					icon: null,
					name: null,
					result: {
						result: [], // 数据源,
						pageSize: 15,
						pageCount: 1,
						pageIndex: 1,
						recoudSite: 1,
						recordCount: 0
					}
				}, // 表格数据，绑定表格用
				activeName: '-1', // 活动标签
				dialogForm: {
					// 弹窗表单信息
					columnActionView: null,
					showColumnActionView: false,
					columnActionType: null
				},
				dataSourceConfig: {
					// 数据源信息,
					type: null,
					columns: null
				},
				selectRows: [], // 批量操作选择的数量
				loading: true,
				fetchHandlersPara: {},
				tabsWdiget: {}, // 已经选择标签信息
				async: false
			}
		},
		mounted() {
			this.$nextTick(async () => {
				if (this.type) {
					await this.init()
				}
			})
		},
		methods: {
			// 表格初始,可以在父组件中使用refs来调用，具体的用法可参考admin-auto-table
			async init(type, columns) {
				data.beforeInit(this, type, columns)
				await data.fetchDatas(this)
				// 表格加载完成后，调用父组件中的afterTableLoad事件，完成表格加载完后的其他操作，比如修改标题，修改颜色等
				// 具体的用法可参考admin-auto-table  admin-autoconfig-list
				this.$emit('afterTableLoad', this.dataResult)
			},
			// 弹窗表格操作
			async saveForm(models) {
				dialog.saveForm(this.models)
			},
			// 弹窗表格操作
			async columnAction(data, scope) {
				await dialog.columnAction(this, data, scope)
			},
			// 弹窗表格操作
			formLoad(val) {
				if (val) {
					this.loading = false
				}
			},
			// 弹窗表格关闭
			handleDialogClose() {
				this.dialogVisible = false
			},
			// 选择全选操作
			handleSelectionChange(rows) {
				this.$nextTick(() => {
					this.$refs.batchSetting.init(rows)
				})
				this.selectRows = rows
			},
			// 批量更新
			async batchUpdate() {
				await selection.batchUpdate(this)
			},
			// 批量删除
			async batchDelete() {
				await selection.batchDelete(this)
			},
			// 导出操作
			async toExcel(excelType) {
				if (!excelType) {
					excelType = this.type
				}
				this.$refs.export_table.popupChang(excelType, this.widgetData, this.dataResult)
			},
			// 标签操作
			tabHandleClick(tab) {
				data.tabClick(this, this.dataResult.tabs[tab.index - 1], tab.index)
				var sourceData = this.dataResult.tabs[tab.index - 1]
				if (sourceData) {
					this.tabsWdiget[sourceData.name] = sourceData.key
				}
			},
			// 搜索事件
			search(paramenter) {
				data.search(this, paramenter)
			},
			// 表格操作方法
			async tableActionMethod(actionItem, rowScope, index) {
				if (actionItem.type === 2) {
					var deleteResult = await action.columnDeleteMethod(
						this,
						actionItem,
						rowScope
					)
					if (deleteResult) {
						this.dataResult.result.result.splice(index, 1)
					}
				} else {
					action.tableActionMethod(this, actionItem, rowScope)
				}
			},
			// 分页数量事件
			handleSizeChange(size) {
				this.dataResult.pageSize = size
				this.dataResult.result.pageSize = size
				data.search(this)
			},
			// 分页页码事件
			handleCurrentChange(pageIndex) {
				this.dataResult.pageIndex = pageIndex
				this.fetchHandler()
			},
			searchHandler() {
				this.dataResult.pageIndex = 1
				data.search(this)
			},
			// 搜索用
			async fetchHandler() {
				this.dataResult.pageSize = this.dataResult.result.pageSize
				data.fetchDatas(this)
			},
			// 操作列事件
			enter(row) {
				this.$set(row, 'show', !row.show)
			},
			// 操作列事件
			leave(row) {
				this.$set(row, 'show', !row.show)
			},
			tableCell(row) {
				var valueList = []
				valueList.push(row)
				this.$refs.table.toggleRowSelection(row)
			},
			// 列选择事件,触发父事件
			rowClick(val) {
				this.$emit('rowSelect', val)
			},
			// 获取表格格式颜色
			getColor() {
				return format.getColor()
			},
			getEmun() {
				return format.getEmun()
			},
			getForeigKey(type, data) {
				let value = ''
				let list = this.dataResult.result.foreignDictionary[data.prop]
				if (!list) {
					return
				}
				if (list.length > 0) {
					list.forEach(item => {
						if (item.key === type) {
							value = item.value
						}
					})
				}
				return value
			}
		}
	}
</script>


<style rel="stylesheet/scss" lang="scss">
	@import "./style.scss";
</style>